import logo from './logo.svg';
import './App.css';
import { Component,createContext,useContext,useReducer,useState } from 'react';

// React 16 之前使用 class 组件
class Button extends Component{
  constructor(props) {
    super(props);
    this.state = {
      buttonText:'click me,please'
    }
  }
  handleClick() {
    this.setState(() => {

      return {
        buttonText:'thanks,has been clicked'
      }
    })
  }
  componentDidMount() {

    console.log('挂载上去了');
  }
  // render 只负责 UI
  render() {
    const { buttonText } = this.state;
    return (
      <div>
        
        <button onClick={this.handleClick} >{buttonText}</button>
      </div>
    )
    
  }
}

function Button1() {

  const [buttonText,setButtonText] = useState('click me,thanks');
  const handleClick = () => setButtonText(buttonText === 'it has been clicked'?'click me,thanks':'it has been clicked');

  return (
    <div>
    <button onClick={handleClick} >{buttonText}</button>
    </div>
  )
}

// React.FC 只传入 props，没有 state
const Hander = () => {

  return (
    <hander>
      无状态组件
    </hander>
  )
}

const ContextCommponent = createContext();

function NavBar() {
  const {username} = useContext(ContextCommponent);
  return (
    <div className="navbar">{username}</div>
  )
  
}
function Messages() {
  const {username} = useContext(ContextCommponent);

  return (
    <div className="messages">
      <p>Messages for {username}</p>
    </div>
  )
}

function App() {
  const [username,setUsername] = useState('dada');
  

  return (
    <ContextCommponent.Provider value={{
      username:'daxia'
    }}>
    <div className="App">
     DAXIA IS PERFECT
      <Button />
      <Button1 />

      <Hander />
      <NavBar />
      <Messages />
    </div>
    </ContextCommponent.Provider>
  );
}

export default App;
